import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Link } from 'react-router';
import {  Modal,Icon,Tabs,message,Table,Dropdown,Menu,Button,Input,Form ,Row,Col,Select,Switch,Popconfirm,Radio,DatePicker,Anchor }from 'antd';
const Search = Input.Search;
const Option = Select.Option;
import NavBar from '../common/NavBar';
import ContentBody from '../common/ContentBody';
import SearchPanel from '../common/SearchPanel';
import RemarkModal from '../common/RemarkModal';
import EditableCell from '../common/EditableCell';
import DatePickerCell from '../common/DatePickerCell';

import api from '../api';
import moment from 'moment';
import {bind_change, bind_toggle} from '../common/State';
const {RangePicker} = DatePicker;


export default class DetailBaseInfo extends React.Component {
    constructor(props, context){
        super(props, context);
        this.state={
           editable:true

        };
    }

    async componentWillMount(){
      // let session = await this.props.route.session();
      // let {page,pageSize} = this.state
      // this.setState({
      //   session,
      // })
      // this.doFetch(page,pageSize);
    }
    async componentWillReceiveProps(nextProps){
        //  let session = await this.props.route.session();
        // this.setState({
        //   session
        // })
    }
    //查询列表
    async doFetch(page,size){


    }

    getCellInput(value,status,i,k){
      let {editable} = this.state;
      if (editable) {
        return (
            <Col span={8} style={{"padding":"10px"}}>
              <EditableCell
                editable={editable}
                value={value}
                onChange={value => this.handleChange(key, index, value)}
                status={status}
                self={this}
                i={i}
                k={k}
                />
            </Col>
          )
      }else{
        return(
          <Col span={8} style={{"padding":"15px"}}>
              <EditableCell
                editable={editable}
                value={value}
                onChange={value => this.handleChange(key, index, value)}
                status={status}
                self={this}
                i={i}
                k={k}
                />
            </Col>
          )
      }
    }

    getCellDatePicker(value){
      let {editable} = this.state;
      if (editable) {
        return (
            <Col span={8} style={{"padding":"10px"}}>
              <DatePickerCell
                editable={editable}
                value={value}
                onChange={value => this.handleChange(key, index, value)}
                status={status}
                self={this}
                />
            </Col>
          )
      }else{
        return(
          <Col span={8} style={{"padding":"15px"}}>
              <DatePickerCell
                editable={editable}
                value={value}
                onChange={value => this.handleChange(key, index, value)}

                self={this}
                />
            </Col>
          )
      }
    }



    handleChange(key, index, value){

    }

    
    
    render() {

        return (
                  <div className="containerWithTopAndBottomBorder bgWhite paddingB20">

                    <div className="padding15">
                      <span >基础信息</span>

                      <div style={{"float":"right",marginTop:"-5px"}} className="text-right">
                        <Button >
                          <Icon type="edit"/>
                        </Button>
                      </div>
                      
                    </div>

                    <Row className="containerWithTopBorder">
                      <Col span={4} className="greyCellBg containerWithRightBorder" style={{"padding":"15px"}}>
                        资产总金额
                      </Col>
                      {this.getCellInput("1","save","0","0")}
                      <Col span={4} className="greyCellBg containerWithRightAndLeftBorder" style={{"padding":"15px"}}>
                        剩余资产金额
                      </Col>
                      {this.getCellInput("2","cancel","1","1")}
                    </Row>
                    <Row className="containerWithTopBorder">
                      <Col span={4} className="greyCellBg containerWithRightBorder" style={{"padding":"15px"}}>
                        应收起始日
                      </Col>
                      {this.getCellDatePicker("1")}
                      <Col span={4} className="greyCellBg containerWithRightAndLeftBorder" style={{"padding":"15px"}}>
                        预计收款日
                      </Col>
                      {this.getCellDatePicker("2")}
                    </Row>
                    <Row className="containerWithTopBorder">
                      <Col span={4} className="greyCellBg containerWithRightBorder" style={{"padding":"15px"}}>
                        应收账款分级
                      </Col>
                      {this.getCellInput("1","save","0","0")}
                      <Col span={4} className="greyCellBg containerWithRightAndLeftBorder" style={{"padding":"15px"}}>
                        逾期天数
                      </Col>
                      {this.getCellInput("2","cancel","1","1")}
                    </Row>
                    <Row className="containerWithTopBorder">
                      <Col span={4} className="greyCellBg containerWithRightBorder" style={{"padding":"15px"}}>
                        是否结算
                      </Col>
                      {this.getCellInput("1","save","0","0")}
                      <Col span={4} className="greyCellBg containerWithRightAndLeftBorder" style={{"padding":"15px"}}>
                        结算金额
                      </Col>
                      {this.getCellInput("2","cancel","1","1")}
                    </Row>
                    <Row className="containerWithTopBorder">
                      <Col span={4} className="greyCellBg containerWithRightBorder" style={{"padding":"15px"}}>
                        是否有保险
                      </Col>
                      {this.getCellInput("1","save","0","0")}
                      <Col span={4} className="greyCellBg containerWithRightAndLeftBorder" style={{"padding":"15px"}}>
                        保险覆盖率
                      </Col>
                      {this.getCellInput("2","cancel","1","1")}
                    </Row>


                  </div>
        );
    }

}
DetailBaseInfo.contextTypes= { router: React.PropTypes.object.isRequired};
